<template>
  <div v-loading="refreshloading">
    <h3 class="table-title">奖励表彰记录</h3>
    <el-radio-group v-model="rewardSelected" style="margin-bottom: 1rem;">
      <el-radio-button
        v-for="item in rewardList"
        :key="item.id"
        :label="item.id"
      >{{ item&&item.name }}</el-radio-button>
    </el-radio-group>
    <RewardDescription
      v-if="rewardSelectedDict&&rewardSelected"
      :data.sync="rewardSelectedDict[rewardSelected]"
      :is-edit="false"
    />
    <el-row :gutter="20">
      <el-col v-for="panel in rewardModel" :key="panel.id" :sm="24" :md="12" :lg="12" :xl="8">
        <RewardRecordPanel :data="panel" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { RewardList } from '@/api/zzxt/reward'
import { arrayToTree } from '@/utils'
export default {
  name: 'Reward',
  components: {
    RewardDescription: () =>
      import('../BackManage/RewardManage/RewardDescription'),
    RewardRecordPanel: () => import('./RewardRecord')
  },
  data: () => ({
    rewardList: null,
    rewardModel: null,
    rewardSelected: null,
    refreshloading: false,
    refreshChildrenLoading: false,
    rewardSelectedDict: null,
    rewordRecordData: null
  }),
  computed: {
    currentCompany() {
      return this.$store.state.user.globalCompany
    },
    ratingType() {
      if (!this.rewardSelected) return null
      if (!this.rewardSelectedDict) return null
      return this.rewardSelectedDict[this.rewardSelected].period
    }
  },
  watch: {
    currentCompany: {
      handler(val) {
        if (!val) return
        this.refreshRewardList()
      },
      immediate: true
    },
    rewardSelected: {
      handler(val) {
        if (val) this.refreshRewardModel()
      },
      immediate: true
    }
  },
  mounted() {
    this.$store.dispatch('party/initDictionary')
  },
  methods: {
    arrayToTree,
    refreshRewardList() {
      this.refreshloading = true
      const query = { company: this.currentCompany, appName: 'party-reward' }
      RewardList(query).then(data => {
        const model = data.list
        this.rewardList = model
        const dict = {}
        model.forEach(item => {
          dict[item.id] = item
        })
        this.rewardSelectedDict = dict
        if (model.length > 0) this.rewardSelected = data.list[0].id
        this.refreshloading = false
      })
    },
    refreshRewardModel() {
      this.refreshChildrenLoading = true
      const parentId = this.rewardSelected
      const query = {
        company: this.currentCompany,
        appName: 'party-reward',
        parent: parentId
      }
      RewardList(query).then(data => {
        const list = data.list
        const trees = arrayToTree(list)
        this.rewardModel = trees
        this.refreshChildrenLoading = false
      })
    }
  }
}
</script>
<style scoped>
.table-title {
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}
</style>
